<template>
	<om-page :title="pageTitle">
		<om-topbutton :hasBgColor="true" @click='searchTab'></om-topbutton>
		<view class="page__bd" style="margin-top: 53px;">
			<uni-list>
				<uni-list-item class="item" :showArrow="false">
					<view>{{getUserName}}</view>
				</uni-list-item> 
				<!-- <uni-list-item class="item" :showArrow="false">
					<view  style="display: flex;justify-content: space-between;">
						<view class="">
							{{'工资月份'}}
						</view>
						<view class="" style="width: 200px; display: flex;justify-content: flex-end;">
							<view class="tui-right tui-col-7">
								<picker ref="monthPicker"  :value="monthIndex" :range="monthList" :range-key="'name'" @change="monthClick">
									<view>
										{{monthVal?monthVal:'请选择'}}
									</view>
								</picker>
							</view>
							<m-icon v-if="monthVal" @click='iconClear' :size="20" class="uni-icon-wrapper" color="#bbb" type="clear" />
						</view>
					</view>
				</uni-list-item> -->
				<view v-for="(item, index) in commonData.datas" :key="index" class="item">
					<uni-list-item 
					@click="infoTab(item)" 
					:extraText="item.pay">
					<view class="flex">
						<view>{{item.date}}</view>
						<om-dot :showDot="item.canConfirm"/>
					</view>
					</uni-list-item>
				</view>
			</uni-list>
		</view>
		<tui-loadmore :visible="commonData.loadding"></tui-loadmore>
		<tui-nomore :visible="!commonData.pullUpOn"></tui-nomore>
		<tui-scroll-top :scrollTop="scrollTop" style="background: rgba(124, 174, 255, 0.5)"></tui-scroll-top>
	</om-page>
</template>

<script>
	import {getUrl} from '../../../static/js/common.js';
	import listLoad from '../../../static/js/listLoad.js';
	import {
		mapState
	} from 'pinia';
	import {
		useLoginUserStore
	} from '@/stores/login-user.js';
	const app = getApp()
export default {
	data() {
		return {
			scrollTop: 0,
			commonData:{},
			pageTitle:"",
			cachename:"salaryRoll",
			monthList:[{name:'2021-01'},{name:'2021-02'}],
			monthIndex:0,
			monthVal:'',
			userInfo:{
				userName:"",
				userId:''
			}
		};
	},
	computed:{
		...mapState(useLoginUserStore, ["userId","userName"]),
		
		getUserName(){
			return  this.userInfo.userName? this.userInfo.userName:this.userName
		}
	},
	methods: {
		iconClear(){
			let _that = this
			_that.monthVal= ''
			listLoad.initData(this,'wxSalaryRoll/getRollList',{userId:_that.userInfo.userId})
		},
		monthClick(e){
			let _that = this
			_that.monthVal =  this.monthList[e.detail.value].name
			listLoad.initData(this,'wxSalaryRoll/getRollList',{userId:_that.userInfo.userId,ymDate:_that.monthVal})
		},
		searchTab() {
			// this.$refs.monthPicker._cancel()
			let param = {
					url:'salaryRoll/findSearchUserPage',
					msg:"计时薪资核算主管可以查所有人；上级可查所有下级！",
					cachename:this.cachename
			}
			let url = getUrl('../search/search',param)
			uni.navigateTo({
				url: url
			});
		},
		getPageInfo(show, title, params) {
			uni.setStorage({
				key: 'info',
				data: show,
			})
			var url = './salaryroll-cache-info?cacheKey=info&title=' + title+'&salaryBillYear='+params[0]+'&salaryBillMonth='+params[1]+'&id='+params[2]
			uni.navigateTo({  
				url: url
			})
		},
		infoTab(item) {
			let arr = item.date.split("-")
			arr.push(item.id)
			this.getPageInfo(item.show, '薪资详情',arr);
		}		
	},
	onLoad(options) {
		let _that = this
		this.pageTitle = options.title || "我的薪资"
		uni.setNavigationBarTitle({
		  title: this.pageTitle
		})
		_that.om.request(
			"salaryConfirm/getYmCombobox"
		).then(res=>{
			_that.monthList = res
		})
	},
	onShow() {
		let _that = this
		uni.getStorage({
			key:_that.cachename,
			success:(res)=>{
				if(res.data){
					let d = res.data
					_that.userInfo.userName = d.username
					_that.userInfo.userId = d.id
					if(_that.monthVal){
						listLoad.initData(this,'wxSalaryRoll/getRollList',{userId:d.id,ymDate:_that.monthVal})
					}else{
						listLoad.initData(this,'wxSalaryRoll/getRollList',{userId:d.id})
					}
				}
			},
			fail:(res)=>{
				listLoad.initData(this,'wxSalaryRoll/getRollList')
			}
		})
	},
	onUnload(){
			uni.removeStorage({
				key:this.cachename,
				success:(res)=>{}
			})
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop
	},
	//页面相关事件处理函数--监听用户下拉动作
	onPullDownRefresh: function() {
		listLoad.pullDownRefresh(this)
	},
	// 页面上拉触底事件的处理函数
	onReachBottom: function() {
		listLoad.reachBottom(this)
	}
};
</script>

<style scoped>
	.item{
		position: relative;
	}
	.itemDot{
		height: 10px;
		width: 10px;
		background-color: #DD524D;
		position:absolute;
		left: 2px;
		top:36%;
		border-radius: 5px;
	}
</style>
